<template>
    <div class="userset">
        <el-card class="card">
            <div slot="header">
                修改个人信息
            </div>
            <el-row style="margin-top: 20px">
                <el-col :span="4" :offset="6">
                    用户名：
                </el-col>
                <el-col :span="8" v-if="!display">
                    <el-input maxlength="20" placeholder="请输入用户名" v-model="user.name"
                              ref="usernameInput"  clearable></el-input>
                </el-col>
                <el-col :span="8" v-if="display">
                    {{user.name}}
                </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
                <el-col :span="4" :offset="6">
                    邮箱：
                </el-col>
                <el-col :span="8" v-if="!display">
                    <el-input maxlength="20" placeholder="请输入邮箱" v-model="user.email"
                              ref="usernameInput"  clearable></el-input>
                </el-col>
                <el-col :span="8" v-if="display">
                    {{user.email}}
                </el-col>
            </el-row>
            <el-row style="margin-top: 30px" v-if="!display">
                <el-col :span="4" :offset="6">
                    原密码：
                </el-col>
                <el-col :span="8" >
                    <el-input maxlength="20" placeholder="请输入原密码" v-model="user.password"
                              type="password"  clearable show-password></el-input>
                </el-col>
            </el-row>
            <el-row style="margin-top: 30px" v-if="!display">
                <el-col :span="4" :offset="6">
                    新密码：
                </el-col>
                <el-col :span="8" >
                    <el-input maxlength="20" placeholder="不填则不修改密码" v-model="user.newPassword"
                              type="password"  clearable show-password></el-input>
                </el-col>
            </el-row>
            <el-row style="margin-top: 40px" v-if="display">
                <el-col :span="10" :offset="7" style="text-align: center">
                    <el-button type="success" icon="el-icon-edit" @click="toupdate">修改</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top: 40px" v-if="!display">
                <el-col :span="10" :offset="7" style="text-align: center">
                    <el-button type="success" icon="el-icon-edit" @click="update">保存</el-button>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "UserSet",
        data() {
            return{
                user:{},
                display: true
            }
        },
        mounted() {
            this.getNowUser();
        },
        methods:{
            toupdate() {
                this.display = false;
            },
            getNowUser() {
                let _this = this;
                _this.$axios.get('user/now')
                    .then(res => {
                        let result= res.data;
                        if (result.status == 200) {
                            _this.user = result.data;
                            console.log(result.data);
                        }else if (result.status == 500) {
                            _this.$message.error(result.message);
                        }
                    })
            },
            update() {
                let _this = this;
                console.log(_this.user)
                _this.$axios.post("user/update",JSON.stringify(_this.user),{
                    headers:{'Content-Type':'application/json'}
                }).then(res=>{
                    var result = res.data;
                    if (result.status == 200) {
                        _this.$message.success(result.message);
                        _this.$router.push({name:'Login'})
                    }else if (result.status == 500) {
                        _this.$message.error(result.message);
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .card {
        width: 50%;
        height: 462px;
        margin:0px auto;
    }
</style>